<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-11-12 17:36
  PageName：d_practice4_search.html
  Function：实战案例 - 设计搜索页
  URL：http://localhost:8080/j_form/j7_practice/d_practice4_search.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设计搜索页</title>

    <style type="text/css">
        /* 设置输入框的整体宽度，并设置为相对定位，称为其子级元素的定位参考 */
        .search_box {
            position: relative;
            width: 360px;
        }

        /* 设置输入框内所有的内补白，边界为0，列表修饰为无，并且设置字体样式 */
        .search_box * {
            margin: 0;
            padding: 0;
            list-style: none;
            font: normal 12px/1.5em "宋体", Verdana, Lucida, Arial, Helvetica, sans-serif;
        }

        /* 隐藏标题文字 */
        .search_box h3, .search_tips h4 {
            display: none;
        }

        /* 将下拉框设置为浮动，并设置其宽度值 */
        .search_box select {
            float: left;
            width: 60px;
        }

        /* 设置搜索输入框样式，浮动并将其与左右两边的元素添加间距 */
        .search_box input {
            float: left;
            width: 196px;
            height: 14px;
            padding: 1px 2px;
            margin: 0 5px;
            border: 1px solid #619FCF;
        }

        /* 设置按钮浮动，以缩进方式隐藏按钮上的文字并去除其边框添加背景图 */
        .search_box button {
            float: left;
            width: 59px;
            height: 18px;
            text-indent: -9999px;
            border: 0 none;
            background: url(images/btn_search.gif) no-repeat 0 0;
            cursor: pointer;
        }

        /* 将搜索提示框设置的宽度与输入框相等，并绝对定位在输入框底部 */
        .search_tips {
            position: absolute;
            top: 17px;
            left: 65px;
            width: 190px;
            padding: 5px 5px 0;
            border: 1px solid #619FCF;
        }

        /* 设置搜索提示框内的列表宽度和高度值，利用浮动避免IE浏览器中列表上下间距增多 */
        .search_tips li {
            float: left;
            width: 100%;
            height: 22px;
            line-height: 22px;
        }

        /* 搜索提示中相关文字居左显示，并设置相关样式 */
        .search_tips li a {
            float: left;
            text-decoration: none;
            color: #333333;
        }

        /* 搜索提示中相关文字在鼠标悬停时显示红色文字 */
        .search_tips li a:hover {
            color: #FF0000;
        }

        /* 以灰色弱化搜索提示相关数据，并居右显示 */
        .search_tips li span {
            float: right;
            color: #CCCCCC;
        }
    </style>
</head>

<body>
<div class="search_box">
    <h3>搜索框</h3>
    <div class="content">
        <form method="post" action="">
            <select>
                <option value="1">网页</option>
                <option value="2">图片</option>
                <option value="3">新闻</option>
                <option value="4">MP3</option>
            </select>

            <input type="text" value="css">
            <button type="submit">搜索</button>

            <div class="search_tips">
                <h4>搜索提示</h4>
                <ul>
                    <li><a href="#">css视频</a><span>共有589个项目</span></li>
                    <li><a href="#">css教程</a><span>共有58393个项目</span></li>
                    <li><a href="#">css+div</a><span>共有158393个项目</span></li>
                    <li><a href="#">css网页设计</a><span>共有58393个项目</span></li>
                    <li><a href="#">css样式</a><span>共有158393个项目</span></li>
                </ul>
            </div>
        </form>
    </div>
</div>
</body>
</html>